<template>
  <div class="echarts">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="js" name="Pie">
import { defineProps, ref, onMounted, watch } from "vue";
import ECharts from "@/components/ECharts/index.vue";

// 定义接收的 props
const props = defineProps({
  pieData: Array
});

const option = ref({
  title: {
    text: "不合格数/ 异常数 / 漏检数 / 完成数  ",
    subtext: "占比",
    left: "56%",
    top: "45%",
    textAlign: "center",
    textStyle: {
      fontSize: 18,
      color: "#000000"
    },
    subtextStyle: {
      fontSize: 15,
      color: "#a1a1a1"
    }
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    top: "4%",
    left: "2%",
    orient: "vertical",
    icon: "circle", //图例形状
    align: "left",
    itemGap: 20,
    textStyle: {
      fontSize: 13,
      color: "#a1a1a1",
      fontWeight: 500
    },
    formatter: function (name) {
      let dataCopy = "";
      let sum = props.pieData[0].value + props.pieData[1].value + props.pieData[2].value + props.pieData[3].value;
      for (let i = 0; i < props.pieData.length; i++) {
        if (props.pieData[i].name === name) {
          dataCopy = ((props.pieData[i].value / sum) * 100).toFixed(2);
          return name + "      " + dataCopy + "%";
        }
      }
      return "";
    }
  },
  series: [
    {
      type: "pie",
      radius: ["70%", "40%"],
      center: ["57%", "52%"],
      silent: true,
      clockwise: true,
      startAngle: 150,
      data: props.pieData.map(item => ({
        value: item.value,
        name: item.name
      })),
      labelLine: {
        length: 80,
        length2: 30,
        lineStyle: {
          width: 1
        }
      },
      label: {
        position: "outside",
        show: true,
        formatter: "{d}%",
        fontWeight: 400,
        fontSize: 19,
        color: "#a1a1a1"
      },
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0.5,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#87CEEB" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#00BFFF" // 100% 处的颜色
            }
          ]
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0.5,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#FFF8DC" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FFFACD" // 100% 处的颜色
            }
          ]
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0.5,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#86E206" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#77C609" // 100% 处的颜色
            }
          ]
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0.5,
          colorStops: [
            {
              offset: 0,
              color: "#a2b1f6" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#3353eb" // 100% 处的颜色
            }
          ]
        }
      ]
    }
  ]
});
function updateOption(pieData) {
  // 检查所有数据是否都为0
  const allZero = pieData.every(item => item.value === 0);

  if (allZero) {
    // 如果所有数据都为0，设置一个默认的图表配置
    option.value = {
      title: {
        text: "暂无数据",
        left: "center",
        top: "50%",
        textStyle: {
          fontSize: 20,
          color: "#000000",
          fontWeight: "normal"
        }
      },
      tooltip: {
        trigger: "item"
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          center: ["50%", "50%"],
          data: []
        }
      ]
    };
  } else {
    option.value = {
      title: {
        text: "不合格数/ 异常数 / 漏检数 / 完成数  ",
        subtext: "占比",
        left: "56%",
        top: "45%",
        textAlign: "center",
        textStyle: {
          fontSize: 18,
          color: "#000000"
        },
        subtextStyle: {
          fontSize: 15,
          color: "#a1a1a1"
        }
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        top: "4%",
        left: "2%",
        orient: "vertical",
        icon: "circle", //图例形状
        align: "left",
        itemGap: 20,
        textStyle: {
          fontSize: 13,
          color: "#a1a1a1",
          fontWeight: 500
        },
        formatter: function (name) {
          let dataCopy = "";
          let sum = pieData[0].value + pieData[1].value + pieData[2].value + pieData[3].value;
          for (let i = 0; i < pieData.length; i++) {
            if (pieData[i].name === name) {
              dataCopy = ((pieData[i].value / sum) * 100).toFixed(2);
              return name + "      " + dataCopy + "%";
            }
          }
          return "";
        }
      },
      series: [
        {
          type: "pie",
          radius: ["70%", "40%"],
          center: ["57%", "52%"],
          silent: true,
          clockwise: true,
          startAngle: 150,
          data: pieData.map(item => ({
            value: item.value,
            name: item.name
          })),
          labelLine: {
            length: 80,
            length2: 30,
            lineStyle: {
              width: 1
            }
          },
          label: {
            position: "outside",
            show: true,
            formatter: "{d}%",
            fontWeight: 400,
            fontSize: 19,
            color: "#a1a1a1"
          },
          color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0.5,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#87CEEB" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#00BFFF" // 100% 处的颜色
                }
              ]
            },
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0.5,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#FFF8DC" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#FFFACD" // 100% 处的颜色
                }
              ]
            },
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0.5,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#86E206" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#77C609" // 100% 处的颜色
                }
              ]
            },
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: "#a2b1f6" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#3353eb" // 100% 处的颜色
                }
              ]
            }
          ]
        }
      ]
    };
  }
}
onMounted(() => {
  console.log("Component is mounted.");
  console.log("Received pieData from parent:", props.pieData);
  updateOption(props.pieData);
});
watch(
  () => props.pieData,
  newVal => {
    console.log("pieData updated", newVal);
    updateOption(newVal);
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
